<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-04-25 21:18:06
 * @LastEditTime: 2024-05-10 10:44:09
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: {{{=it.newOptions.moduleTitle || ""}}}管理
 * @FilePath: \vue-code-design\templates\vue3ElementPlus\DrawerDemo\views\{{{=it.newOptions.MODULE_VALUE}}}\index.vue
 * Copyright 版权声明
-->
<template>
  <standard-page
    ref="crudPage"
    v-model:page="page"
    v-model:listData="listData"
    v-model:btnLoading="btnLoading"
    v-model:listLoading="listLoading"
    :options="options"
    @on-load-data="onLoadData"
    @search-change="searchChange"
    @search-reset="resetChange"
    @refresh-change="refreshChange"
    @row-save="rowSave"
    @row-update="rowUpdate"
    @row-del="rowDel"
    @selection-change="selectionChange"
  >
    <!-- 自定义操作按钮 -->
    <template #handleBtns>
    </template>
  </standard-page>
</template>

<script>
import { getList, deleteSave } from '@/api/{{{=it.newOptions.MODULE_VALUE || ""}}}'
import { mapGetters } from 'vuex'
// 标准增删改查页面 - 组件
import StandardPage from '@/components/StandardPage/index.vue'
import { MODULE_OPTIONS } from './index.js'

export default {
  name: 'DrawerDemo',
  computed: {
    ...mapGetters([
      'drawerVisible',
      'dictData'
    ])
  },
  components: {
    StandardPage
  },
  data() {
    return {
      // 按钮 loading 状态
      btnLoading: false,
      // 列表 loading 状态
      listLoading: false,
      // 分页信息
      page: {
        pageNum: 1,
        total: 110,
        pageSize: 10
      },
      // 查询条件
      listQuery: {},
      // 数据
      listData: [],
      options: MODULE_OPTIONS
    }
  },
  watch: {
  },
  beforeCreate() {
  },
  created() {
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
    // 加载数据
    onLoadData(params) {
      // console.log('--params--', params)
      // console.log('--this.page--', this.page)
      if (typeof params !== 'undefined') {
        this.listQuery = Object.assign({}, this.listQuery, params.query)
      }

      // 查询条件处理
      const queryParams = JSON.parse(JSON.stringify(this.listQuery))

      this.btnLoading = true
      this.listLoading = true
      setTimeout(() => {
        return getList({
          current: this.page.pageNum,
          size: this.page.pageSize,
          ...queryParams
        }).then(response => {
          this.listData = response.data.records || []
          this.page.total = response.data.total || 0

          this.btnLoading = false
          this.listLoading = false
        }).catch(err => {
          err
          this.btnLoading = false
          this.listLoading = false
        })
      }, 1000)
    },
    // 点击搜索后执行方法
    searchChange(params) {
      console.log('点击搜索按钮回调', params)
    },
    // 点击清空的执行方法
    resetChange(params) {
      console.log('清空回调', params)
    },
    // 刷新数据
    refreshChange(params) {
      console.log('刷新数据', params)
    },
    // 新增数据
    rowSave(params) {
      console.log('新增数据', params)
    },
    // 修改数据
    rowUpdate(params) {
      console.log('修改数据', params)
    },
    // 删除数据
    rowDel(params) {
      // console.log('删除数据', params)
      deleteSave({
        ids: params.data.id
      }).then(response => {
        this.$notify({
          title: '提示',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
        this.onLoadData()
      }).catch(err => {
        err
      })
    },
    // selectionChange
    selectionChange(data) {
      console.log('selectionChange:', data)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
